<template>
	<div class="container">
		<div class="logo">
			<h3>欢迎使用新海联OA系统!</h3>
			<img src="../../assets/img/573099991918654518.jpg" />
		</div>
		<div class="list-wrapper">
			<ul>
				<li v-for="(item,indexa) in listData" class="list">
					<h3 @click="iconUp(indexa)"><span class="icon" :class="{up: upIndex === indexa && show === true}" ref="box"></span><span class="content">{{item.group_name}}</span><el-button type="primary" size="mini" @click="delList(item.group_id)">删除</el-button></h3>
					<ul v-show="upIndex === indexa && show === true">
						<li v-for="(itemb,indexb) in item.enshrine" class="item" @click.stop.prevent="onPath(itemb.src)">
							<span>{{itemb.name}}</span>
							<el-button type="primary" size="mini" @click.stop.prevent="del(itemb.id)">删除</el-button>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				listData: [],
				oitem: [],
				up: true,
				upIndex: '',
				show: false
			}
		},
		created() {
            //console.log(this.$route.path)
			this.getMyEnshrine()
		},
		methods: {
			getMyEnshrine() {
				this.apiPost('System/myEnshrine').then(res => {
					this.listData = res
				})
			},

			iconUp(index) {
				this.upIndex = index;
				this.show = !this.show
			},

			delList(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						group_id: id
					}
					this.apiPost('System/delEnshrineGroup', data).then(res => {
						if(!res.error) {
							this.$message({
								type: 'success',
								message: res.msg
							});
						} else {
							this.$message({
								type: 'error',
								message: res.msg
							});
						}
						this.getMyEnshrine()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				})
			},

			del(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						id: id
					}
					this.apiPost('System/delEnshrine', data).then(res => {
						if(!res.error) {
							this.$message({
								type: 'success',
								message: res.msg
							});
						} else {
							this.$message({
								type: 'error',
								message: res.msg
							});
						}
						this.getMyEnshrine()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				})
			},

			onPath(url) {
				router.push(url)
			}
		},
	}
</script>
<style scoped>
	.container {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		min-width: 100%;
		height: 100%;
	}
	
	.logo {
	    flex: 1;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-right:10px;
		padding-bottom: 100px;
		align-items: center;
		background: rgba(255, 255, 255, 1);
	}
	
	.logo h3 {
		font-size: 40px;
		font-family: MicrosoftYaHei;
		color: rgba(0, 48, 124, 1);
		line-height: 100px;
		white-space: nowrap;
	}
	
	.logo img {
		width:400px;
		height:240px;
	}
	
	.list-wrapper {
		box-sizing: border-box;
		flex: 0 0 260px;
		width:260px;
		background:rgba(1,119,191,1);
	}
	
	.list h3 {
		display: flex;
		align-items: center;
		padding-left: 10px;
		padding-right: 10px;
		font-family: "微软雅黑";
		color: #FFFFFF;
		font-size: 14px;
		line-height: 40px;
		cursor: pointer;
		transition: .4s;
	}
	
	.list h3:hover {
		background: #1A558F;
	}
	
	.list h3 .content {
		flex: 1;
		margin-left: 5px;
		color: #fff;
	}
	
	
	.item span {
		color: #FFF;
		font-size: 14px;
		line-height: 30px;
	}
	
	.list .item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 50px;
		padding-right: 10px;
		cursor: pointer;
		transition: .4s;
	}
	
	.list .item:hover {
		background: #1A558F;
	}
	
	.icon {
		display: block;
		width: 16px;
		height: 8px;
		background: url(../../img/close_hover.png) no-repeat;
		background-size: cover;
		transition: .4s;
		transform: rotate(-90deg);
	}
	
	.up {
		transform: rotate(0deg);
	}
</style>